<script setup>
    import { reactive, ref ,watch,computed} from "vue";
    import { request } from "@/utils";
    import { useRoute ,useRouter} from "vue-router";
    import useUserStore from "../store";
 

    const goodslist = ref({});//商品列表
    const totarget = ref("套餐");
    const active = ref(0);
    const baseUrl = "/editgoods";
    const menu = reactive([
      {
        num:'',
        path: "/taocan",
        title: "套餐",
        interface: "套餐",
      },
      {
        num:'',
        path: "/customized",
        title: "私人订制",
        interface: "私人订制",
      },
      {
        num:'',
        path: "/health",
        title: "养生汤",
        interface: "soup",
      },
      {
        num:'',
        path: "/dongyingong",
        title: "冬阴功",
        interface: "冬阴功",
      },
      {
        num:'',
        path: "/salad",
        title: "沙拉",
        interface: "沙拉",
      },
      {
        num:'',
        path: "/snack",
        title: "小吃",
        interface: "小吃",
      },
      {
        num:'',
        path: "/culiang",
        title: "粗粮",
        interface: "粗粮",
      },
      {
        num:'',
        path: "/juice",
        title: "蔬果汁",
        interface: "蔬果汁",
      },
    ])
    
    const total = ref('0');//微表数量
    const addnum = function(){
      total.value++
    }
    //商品加一
    // const datalistdianjitianjia = []

    const wantBuy = reactive([])
    let a = ref('套餐')//路径
    const additem = function ({id},item) {
      /* quanjudata.value.unshift(id)       //   ---------------这里
      console.log('打印',quanjudata.value); */
      store.additem(item)
        if(wantBuy.filter((item)=>{
            return item.id === id
        }).length != 0){
          wantBuy.map((item)=>{
              if(item.id===id){
                  item.qty++
                  return item
              }
              return item
          })
        }else{
            wantBuy.push({
            id,
            qty:1
        })
        }
        addnum()//执行微表数量加一
        menu.forEach(item=>{
          if(item.title=== a.value){
            item.num++
          }
        })
        // menu.filter((item=>{
        //   watch(a,function(n,o){
        //     console.log('新的值',n,'旧的值',o);
        //     if(n === item.title || item.num !== 0){
        //       item.num++
        //       o = item.num
        //     }else if(n = item.num){
        //       item.num++
        //     }
        //   },{immediate:true})
        // }))
        // console.log(wantBuy[0].qty)
      };
    
    
    const router = useRouter()
    const backmenu = function () {
      router.push('/menu')
    }
    const backlogin = function () {
      router.push('/inquire')
    }
    
    
    const goodsNav = async function (goods) {
        const { data } = await request.get('/goods/allgoods',{
          params:{category:goods}
        });
        goodslist.value = data.data
        // totarget.value = data;
        a.value = goods
    
      ////请求所有数据遍历
      // const add = data.data
      // let s = []
      // data.data.forEach(item=>{
      //   if(goods === item.category){
      //     s.push(item)
      //   }
      // })
      // goodslist.value = s
      
    
    };
    // :to="baseUrl + item.path"
    const store = useUserStore()
    const quanjudata = ref([])
    const ondianjitianjiashuzu = function(){
        console.log('datalistdianjitianjia',quanjudata)
        // store.setdata(datalistdianjitianjia)  
    }
</script>
<template>
    <div>
        <div class="homebigbox">
            <van-nav-bar class="homenav">
                <template #left>
                  <van-icon name="wap-nav" size="20" color="#fff" @click="backmenu" />
                </template>
                <template #right>
                  <van-icon name="search" size="20" color="#fff" @click="backlogin" />
                </template>
            </van-nav-bar>
        </div>

        <h3>{{a}}</h3>
        <van-row>
            <van-col span="5">
              <van-sidebar v-model="active">
                <van-sidebar-item v-for="item in menu" :key="item.title" :title="item.title" @click="goodsNav(item.title)"
                  class="sidebarnav" :badge='item.num' />

              </van-sidebar>
            </van-col>
            <van-col span="19">
                <div>
                    <van-swipe-cell v-for="item in goodslist" :key="item.id">
                      <van-card :num="wantBuy.filter((itm)=>{
                        return item.id === itm.id
                      })[0]?.qty" :price="item.price" :title="item.goodsname" class="goods-card"
                        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" @click="additem(item,item)" />
                    </van-swipe-cell>
                </div>
                <div class="qqbox">

                </div>
            </van-col>
        </van-row>
        <!-- <van-button icon="plus" type="primary" /> -->
        <div>
          <van-space :size="200" class="editbutton" style="background-color: #ffffff;">
              <div style="width:100px">共{{total}}件</div>
              <van-button type="danger" name="end" to="cart" @click="ondianjitianjiashuzu">购物车</van-button>
          </van-space>

        </div>
    </div>
</template>
    
<style scoped>
    :deep(.van-sidebar) {
      width: 30vw;
    }

    :deep(.sidebarnav) {
      width: 100%;
      background-color: #fafafa;
    }

    .goods-card {
      margin: 0;
      background-color: white;
    }

    .delete-button {
      height: 100%;
    }

    .editbutton {
      width: 100vw;
      border: 1px solid #ccc;
      position: fixed;
      bottom: 0px;
    }

    .qqbox {
      width: 100%;
      height: 10vh;
    }

    .homebigbox {
      overflow: hidden;
    }

    .homenav {
      background-color: deepskyblue;
    }
</style>